<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="userForm"
        :rules="userRules"
        :label-width="100"
        label-placement="left"
        require-mark-placement="left"
        :disabled="type === 'preview'"
      >
        <template v-for="(item, index) in getFormOptions" :key="index">

          <n-form-item v-if="item.type == 'select'" :label="item.label" :path="item.key">
            <n-select v-model:value="userForm[item.key]" v-bind="item.props" @update:value="changeDept" />
          </n-form-item>

          <n-form-item v-if="item.type == 'select-multiple'" :label="item.label" :path="item.key">
            <n-select v-model:value="userForm[item.key]" multiple v-bind="item.props" />
          </n-form-item>

        </template>
      </n-form>

    </template>
  </Modal>
</template>

<script>
import { defineComponent, ref, reactive, computed, toRefs } from 'vue'
import { form, getDeptInfo, getPerson } from '../tools/form.js'
import Modal from '@/components/Modal/index.vue'
import { orderDistribution } from '@/api/order-work/index'
import { useUserStore } from '@/store/modules/user'

export default defineComponent({
  name: 'OrderModal',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => null
    }
  },
  emits: {
    'update:visible': null,
    'reload': null
  },
  setup(props, { emit }) {
    const roleDeptId = useUserStore().userInfo.deptId // 该角色的部门id
    getDeptInfo(roleDeptId)

    const { formItem, userForm, userRules } = form
    const formRef = ref()

    // 处理拼接
    const obj = {}
    const data = reactive({
      userForm: {
        ...userForm,
        ...props.data,
        ...obj
      },
      userRules: {
        ...userRules
      }
    })
    const getModalOptions = computed(() => {
      return {
        show: props.visible,
        title: '分配工单',
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    const getFormOptions = computed(() => {
      return {
        ...formItem
      }
    })

    // 部门切换事件
    const changeDept = (e, obj) => {
      data.userForm.assignUserIds = []
      getPerson(e)
    }

    function handleConfirm() {
      formRef.value?.validate(async(errors) => {
        if (!errors) {
          const params = {
            ...data.userForm,
            assignUserIds: data.userForm.assignUserIds.join(','),
            workorderId: props.data.id
          }
          orderDistribution(params).then(res => {
            if (res.code === 0) {
              emit('reload')
              handleClose()
            } else {
              $message.error(res.msg)
            }
          })
        } else {
          $message.error('请完善必填信息')
        }
      })
    }

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      formRef,
      getModalOptions,
      getFormOptions,
      handleConfirm,
      handleClose,
      changeDept
    }
  }
})
</script>

<style lang="scss" scoped>
.n-input-number {
  width: 100%;
}

.textIcon {
  margin-left: 3px;
  margin-right: 3px;
  font-size: 16px;
  // font-weight: bold;
}

.inputGoup0 {
  width: 50%;
}

.inputGoup1 {
  width: 50%;
}

.mapInput {
  margin-right: 5px;

  :deep(.n-base-icon) {
    display: none;
  }
  :deep(.n-input__suffix) {
    display: none;
  }
}
</style>
